<template>
  <el-dialog
    :title="params.title || '查看脚本'"
    width="50%"
    :visible.sync="params.visible"
  >
    <div ref="mycode" style="height: 400px" />
  </el-dialog>
</template>

<script>
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
// monaco语言包
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
import 'monaco-editor/esm/vs/basic-languages/pascal/pascal.contribution'
import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution'
import 'monaco-editor/esm/vs/basic-languages/powershell/powershell.contribution'
import 'monaco-editor/esm/vs/basic-languages/python/python.contribution'
import 'monaco-editor/esm/vs/basic-languages/perl/perl.contribution'

export default {
  components: {},
  props: {
    params: {
      type: Object,
      default() {
        return {
          visible: false,
          vclScript: ''
        }
      }
    }
  },
  data() {
    return {
      editorText: ''
    }
  },
  created() {
    this.initWindow()
  },
  methods: {
    initWindow() {
      setTimeout(() => {
        this.editorText = monaco.editor.create(this.$refs.mycode, {
          value: '',
          readOnly: false,
          lineNumbers: true,
          theme: 'vs-dark',
          lineHeight: 20,
          tabSize: 2,
          automaticLayout: true,
          language: 'javascript'
        })
        this.editorText.setValue(this.params.vclScript)
      }, 0)
    }
  }
}
</script>

<style scoped>
</style>
